<!--
 * @Author: 18222335065 2369811390@qq.com
 * @Date: 2022-09-07 09:09:39
 * @LastEditors: 18222335065 2369811390@qq.com
 * @LastEditTime: 2022-09-07 20:21:06
 * @FilePath: \项目\am-dashboard\src\pages\government\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <!-- 头部 -->
    <header class="header">智慧城市大气监测系统</header>
    <!-- /头部 -->
    <!-- 体部 -->
    <div class="content">
      <div class="top">
        <div class="left">
          <div class="charts"><Left1/></div>
          <div class="charts"><Left2/></div>
        </div>
        <div class="center"><Map></Map></div>
        <div class="right">
          <div class="charts">
            <Right1/>
          </div>
          <div class="charts">
            <Right2/>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="charts">
          <Bottom1/>
        </div>
        <div class="charts">
          <Bottom2/>
        </div>
        <div class="charts">
          <Bottom3/>
        </div>
        <div class="charts">
          <Bottom4/>
        </div>
      </div>
    </div>
    <!-- /体部 -->
  </div>
</template>
<script>
import Left1 from './components/Left1.vue'
import Left2 from './components/Left2.vue'
import Right2 from './components/Right2.vue'
import Right1 from './components/Right1.vue'
import Map from './components/Map.vue'
import Bottom1 from './components/Bottom1.vue'
import Bottom2 from './components/Bottom2.vue'
import Bottom3 from './components/Bottom3.vue'
import Bottom4 from './components/Bottom4.vue'
export default {
  components:{
    Left1,
    Left2,
    Right2,
    Map,
    Right1,
    Bottom1,
    Bottom2,
    Bottom3,
    Bottom4,
  },
  data() {
    return {};
  },
};
</script>
<style lang="scss">
// 头部
.header {
  height: 60px;
  background-image: url("../../assets/layout/header.png");
  background-size: 100% 200px;
  color: white;
  font-size: 28px;
  text-align: center;
}
// 体部
.content {
  .charts{
    background-image: url('../../assets/layout/chart_box_bg.png');
    background-size: 100% 100%;
    margin: 0 .5em .5em .5em;
  };
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  .top {
    flex: 2;
    display: flex;
    .left,.right{
      flex: 1;
      display: flex;
      flex-direction: column;
      div{
        flex: 1;
      }
    }
    .center{
      flex: 2;
      background-image: url('../../assets/layout/chart_center_box_bg.png');
      background-size: 100% 100%;
      margin-bottom: .5em;
    }
  }
  .bottom {
    flex: 1;
    display: flex;
    div{
      flex: 1;
    }
  }
}
</style>